<template>
	<div>
		<!-- 表单 -->
		<el-form :inline="true" :model="bill" class="demo-form-inline">
			<el-form-item label="商品名称">
				<el-input v-model="bill.productName" placeholder="商品名称"></el-input>
			</el-form-item>
			<el-form-item label="供应商">
				<el-select v-model="bill.providerId" placeholder="供应商">
					<el-option value="0" label="供应商">--取消查询--</el-option>
					<el-option v-for="proList in getProviderList" :value="proList.id" :label="proList.proName">
						{{proList.proName}}
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="是否付款">
				<el-select v-model="bill.isPayment" placeholder="是否付款">
					<el-option label="是否付款" value="0" >--取消查询--</el-option>
					<el-option label="是" value="2"></el-option>
					<el-option label="否" value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
		</el-form>

		<!-- 表格 -->
		<el-table :data="getBillList" style="width: 100%" border>
			<!-- 展开显示的标题 -->
			<el-table-column type="expand" fixed="left">
				<template slot-scope="props">
					<el-form label-position="left" inline class="demo-table-expand">
						<el-form-item label="订单编码">
							<span>{{ props.row.billCode}}</span>
						</el-form-item>
						<el-form-item label="商品名称">
							<span>{{ props.row.productName }}</span>
						</el-form-item>
						<el-form-item label="供应商">
							<span>{{ props.row.provider.proName }}</span>
						</el-form-item>
						<el-form-item label="订单金额">
							<span>{{ props.row.totalPrice }}</span>
						</el-form-item>
						<el-form-item label="是否付款">
							<span>{{ props.row.isPayment==2?'是':'否' }}</span>
						</el-form-item>
						<el-form-item label="创建日期">
							<i class="el-icon-time"></i>
							<span>{{ props.row.creationDate }}</span>
						</el-form-item>
					</el-form>
				</template>
			</el-table-column>

			<!-- 没展开显示的标题 -->
			<el-table-column align="center" label="订单编码" width="220" prop="name">
				<template slot-scope="scope">
					<div>
						<span>{{scope.row.billCode}}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column align="center" label="商品名称" width="220" prop="productName"></el-table-column>
			<el-table-column align="center" label="供应商" width="350" prop="provider.proName"></el-table-column>
			<el-table-column align="center" label="订单金额" width="180" prop="totalPrice"></el-table-column>
			<el-table-column align="center" label="是否付款" width="180">
				<div slot-scope="scope">
					<span>{{scope.row.isPayment==1?'否':'是'}}</span>
				</div>
			</el-table-column>
			<el-table-column align="center" label="创建日期" width="250">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 10px">{{ scope.row.creationDate }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" fixed="right">
				<template slot-scope="scope">
					<el-button size="mini" @click="dialogVisible = true;handleEdit(scope.$index, scope.row)">编辑
					</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<!-- 
			:current-page="2"》》选择默认第几页
		    :page-size="15"》》选择一页显示多少条数据
		 -->
		<div class="block" style="margin-top:20px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:page-sizes="[2,5,8,15,50,100,200,500]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="bill.billCount">
			</el-pagination>
		</div>

		<el-dialog title="修改订单" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" center>
			<el-form :model="getUpBill":rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" status-icon>
				<el-form-item label="订单编码" prop="billCode">
					<el-input v-model="getUpBill.billCode" placeholder="订单编码"></el-input>
				</el-form-item>
				<el-form-item label="商品名称" prop="productName">
					<el-input v-model="getUpBill.productName" placeholder="商品名称"></el-input>
				</el-form-item>
				<el-form-item label="商品单位" prop="productUnit">
					<el-input v-model="getUpBill.productUnit" placeholder="商品单位"></el-input>
				</el-form-item>
				<el-form-item label="商品数量" prop="productCount">
					<el-input v-model="getUpBill.productCount" placeholder="商品数量"></el-input>
				</el-form-item>
				<el-form-item label="总金额" prop="totalPrice">
					<el-input v-model="getUpBill.totalPrice" placeholder="总金额"></el-input>
				</el-form-item>
				<el-form-item label="供应商" prop="proName">
					<el-select placeholder="供应商" v-model="getUpBill.provider.proName">
						<el-option v-for="proList in getProviderList" :value="proList.id" :label="proList.proName">
							{{proList.proName}}
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="是否付款" prop="isPayment">
					<el-select placeholder="是否付款" v-model="getUpBill.isPayment==2?'是':'否'">
							<el-option label="是" value="2"></el-option>
							<el-option label="否" value="1"></el-option>
						</el-select>
					</el-form-item>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		name: "BillList",
		data() {
			return {
				/* 表单数据 */
				bill: {
					productName: '', //商品名称
					providerId: '', //供应商名称,
					isPayment: '', //是否付款
					billCount: 0 //总数目
				},
				/* 订单数据 */
				getBillList: [

				],
				/* 修改的订单数据 */
				getUpBill:{
					provider:{}
				},
				/* 供应商数据下拉框 */
				getProviderList: [

				],
				currPage: 1, //当前页
				pageSize: 8, //每页显示的数量
				dialogVisible: false,
				rules: {
				          billCode: [
				            { required: true, message: '请输入订单编码', trigger: 'blur' }//blur失去焦点时验证
				          ],
				          productName: [
				            { required: true, message: '请输入商品名称', trigger: 'blur' }
				          ],
				          productUnit: [
				            { type: 'date', required: true, message: '请选输入商品单位', trigger: 'blur' }
				          ],
				          productCount: [
				            { type: 'date', required: true, message: '请输入商品数量', trigger: 'blur' }
				          ],
				          totalPrice: [
				            { type: 'array', required: true, message: '请输入总金额', trigger: 'blur' }
				          ],
				          proName: [
				            { required: true, message: '请选择活供应商', trigger: 'change' }
				          ],
				          isPayment: [
				            { required: true, message: '请填写是否付款', trigger: 'change' }
				          ]
				        }
			}
		},
		/* 在挂载模板的时候去请求后台数据 */
		mounted() {
			this.selectBillList();
			this.selectBillCount();
			this.selectPro();
		},
		/* 方法 */
		methods: {
			//查询数据总条数
			selectBillCount() {
				this.axios.get("/api/query/billCount", {
					params: {
						productName: this.bill.productName,
						providerId: this.bill.providerId,
						isPayment: this.bill.isPayment,
					}
				}).then(results => {
					this.bill.billCount = results.data;
				});
			},
			//查询下拉框中的供应商
			selectPro() {
				this.axios.get("/api/query/billProvider").then(results => {
					this.getProviderList = results.data;
				})
			},
			//查询订单数据
			selectBillList(pageSizeVal, currPageVal) {
				this.axios.get("/api/query/bill", {
					params: {
						//上下有一页
						pageSize: pageSizeVal,
						currPage: currPageVal,
						//form表单要查询的参数
						productName: this.bill.productName,
						providerId: this.bill.providerId,
						isPayment: this.bill.isPayment
					}
				}).then(results => {
					this.getBillList = results.data
				});
			},
			/* 查询事件 */
			onSubmit() {
				//每次点击查询就要把每页要显示多少条的数量传进去，第二个参数是默认从第一页开始查询为1
				this.selectBillList(this.pageSize, 1);
				this.selectBillCount();
			},
			//编辑事件
			handleEdit(index, row) {
				this.getUpBill = row;
				console.log("getUpBill===" + this.getUpBill)
				console.log(index, row);
			},
			//删除事件
			handleDelete(index, row) {
				//删除事件
				console.log(index, row);
			},
			//每页数据量
			handleSizeChange(val) {
				//当点击每页显示多少页一条时，去查询出当前多少条一页的数据/
				this.pageSize = val;
				this.selectBillList(val, this.currPage);
			},
			//当前页数
			handleCurrentChange(val) {
				this.currPage = val;
				this.selectBillList(this.pageSize, val);
			},
			//点击编辑按钮的关闭事件
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			}
		}
	}
</script>

<style>
	/* .demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-left: 48px;
		margin-bottom: 0;
		width: 100%;
	} */
</style>
